<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted, PropType } from 'vue';
import {
  IconMinusCircleFill,
  IconCaretDown,
  IconDown
} from '@arco-design/web-vue/es/icon';
import { CONTAIN } from '@/constants/indexTree';
import API from '@/services';
const emit = defineEmits(['remove']);
const props = withDefaults(
  defineProps<{
    modelValue: any;
    disableRemove: boolean;
    containCondition: any[];
    detailDrewer: boolean;
    dimensionOption: any;
    size: any;
  }>(),
  {
    disableRemove: false
  }
);
const dimensionValus = ref();
const dimensionFilter = computed(() => props.modelValue);

const getDimensionName = async (id: any) => {
  try {
    const { code, data } = await API.dataTable.getDataTableGetDimensionEnumById(
      {
        id
      }
    );
    if (code === 200) {
      dimensionValus.value = data;
    } else {
      dimensionValus.value = [];
    }
  } catch (error) {
    dimensionValus.value = [];
  }
};
const getItem = (res: any, id: any) => {
  return res?.find((item: any) => item.dimensionId === id);
};
const labelValueRef = ref<any>();
const changeLabelValue = (v: any) => {
  const selectLabel = dimensionValus.value.filter(
    (item: any, index: boolean) => {
      return v.includes(item.value);
    }
  );
  dimensionFilter.value.selectLabel = selectLabel?.map((item: any) => {
    return item.label;
  });
};
onMounted(() => {
  if (dimensionFilter.value.dimId) {
    getDimensionName(dimensionFilter.value.dimId);
  }
});
</script>

<template>
  <div class="dis-flex align-items mb-12 space-between selectWrapper">
    <a-select
      v-model="dimensionFilter.dimId"
      :style="{ width: '120px', height: '36px' }"
      class="mr-6"
      allow-search
      @change="
        (v) => {
          getDimensionName(v);
          dimensionFilter.values = [];
          dimensionFilter.dimName = getItem(
            props.dimensionOption,
            v
          ).columnDimName;
          dimensionFilter.fieldName = getItem(
            props.dimensionOption,
            v
          ).columnOtherName;
          dimensionFilter.opType = 'IN'
        }
      "
    >
      <template #arrow-icon>
        <icon-caret-down />
      </template>
      <a-option
        v-for="item in props.dimensionOption"
        :key="item.dimensionId"
        :value="item.dimensionId"
        :label="item.columnDimName"
      >
      </a-option>
    </a-select>
    <a-select
      v-if="!props.detailDrewer"
      :options="CONTAIN"
      v-model="dimensionFilter.opType"
      :style="{ width: '92px' }"
      size="small"
      class="ml-6"
    >
      <template #arrow-icon>
        <icon-caret-down />
      </template>
    </a-select>

    <a-select
      multiple
      v-model="dimensionFilter.values"
      placeholder="请选择"
      :size="props.size"
      class="ml-6 inputFilter"
      :style="{ width: '360px', minHeight: '32px', height: 'auto' }"
      :options="dimensionValus"
      @change="changeLabelValue"
      ref="labelValueRef"
      :tag-props="{ color: '#f2f3f5' }"
    >
      <template #arrow-icon>
        <icon-caret-down />
      </template>
    </a-select>
    <icon-minus-circle-fill
      style="color: red; cursor: pointer; margin-top: 7px"
      size="16"
      class="ml-6"
      @click="
        () => {
          emit('remove');
        }
      "
    />
  </div>
</template>

<style>
.index-card-config .arco-input-number-mode-embed .arco-input-number-step {
  opacity: 1;
}
.inputFilter {
  flex: 1 1 auto;
}
.selectWrapper
  .arco-select-view-multiple
  .arco-select-view-inner
  .arco-select-view-tag {
  background-color: #f2f3f5;
}
</style>
